<script setup lang="ts">
const appConfig = useAppConfig()
// 产品介绍
const productLinks = [
  { label: '通知短信', to: '/products/notify-sms' },
  { label: '验证码短信', to: '/products/verify-sms' },
  { label: '会员营销短信', to: '/products/marketing-sms' },
  { label: '图片/视频短信', to: '/products/media-sms' },
  { label: '5G短信', to: '/products/5g-sms' },
  { label: '语音短信', to: '/products/voice-sms' },
  { label: '国际短信', to: '/products/intl-sms' },
  { label: '物联网卡', to: '/products/iot-card' }
]

// 快速入口
const quickLinks = [
  { label: '行业解决案例', to: '/solutions' },
  // { label: '开发者工具', to: '/developers' },
  { label: '关于我们', to: '/about' },
]

// 友情链接（外部链接可以根据实际情况修改）
const friendLinks = [
  { label: '积分商城', to: 'http://hydc16.cn/' },
  // { label: '物流配送', to: '#' },
  // { label: 'APP开发', to: '#' },
  // { label: '软件外包', to: '#' }
]
</script>

<template>
  <footer>
    <!-- 主要内容区域 - #2e3444 背景 -->
    <div class="px-4 py-12 md:py-16" style="background-color: #2e3444;">
      <div class="mx-auto max-w-7xl">
        <!-- 桌面端：6列布局（公司信息占2列，其他各占1列） | 移动端：3列布局（中间三个并排） -->
        <div class="grid grid-cols-2 md:grid-cols-6 gap-6 md:gap-12">
          <!-- 公司信息（带Logo） - 桌面端占2列 -->
          <div class="col-span-3 md:col-span-3 space-y-4 flex flex-col items-center md:items-start text-center md:text-left">
            <!-- Logo -->
            <div class="mb-6">
              <NuxtLink to="/" class="inline-block">
                <!-- <AppLogo class="h-8 w-auto text-white" /> -->
                <img class="w-40 h-15" src="/logo_w.png" alt="logo"/>
              </NuxtLink> 
            </div>
            
            <h3 class="text-base font-semibold text-white">福州瀚辰擎霄信息技术有限公司</h3>
            <div class="space-y-2 text-sm text-gray-300 text-left">
             
              <p class="flex items-start gap-2 justify-start lg:justify-start">
                <span class="text-gray-400 min-w-16">联系电话:</span>
                <a href="tel:15860740037" class="hover:text-white transition-colors cursor-pointer">15860740037</a>
              </p>
              <p class="flex items-start gap-2 justify-start lg:justify-start">
                <span class="text-gray-400 min-w-16">公司邮箱:</span>
                <a href="mailto:476299630@qq.com" class="hover:text-white transition-colors cursor-pointer">476299630@qq.com</a>
              </p>
              <p class="flex items-start gap-2 justify-start lg:justify-start">
                <span class="text-gray-400 min-w-16">公司地址:</span><span>福州市台江区宁化街道望龙二路1号海西金融大厦（福州IFC）12层01-B单元</span>
              </p>
            </div>
          </div>

          <!-- 产品介绍 -->
          <div class="col-span-1 space-y-4">
            <h3 class="text-base font-semibold text-white mb-4">产品介绍</h3>
            <ul class="space-y-2">
              <li v-for="link in productLinks" :key="link.to">
                <NuxtLink 
                  :to="link.to" 
                  class="text-sm text-gray-300 hover:text-white transition-colors"
                >
                  {{ link.label }}
                </NuxtLink>
              </li>
            </ul>
          </div>

          <!-- 快速入口 -->
          <div class="col-span-1 space-y-4">
            <h3 class="text-base font-semibold text-white mb-4">快速入口</h3>
            <ul class="space-y-2">
              <li v-for="link in quickLinks" :key="link.to">
                <NuxtLink 
                  :to="link.to" 
                  class="text-sm text-gray-300 hover:text-white transition-colors"
                >
                  {{ link.label }}
                </NuxtLink>
              </li>
              <li>
                <NuxtLink 
                  :to="appConfig.system.adminUrl" 
                  target="_blank"
                  class="text-sm text-gray-300 hover:text-white transition-colors"
                >
                  管理中心
                </NuxtLink>
              </li>

            </ul>
          </div>

          <!-- 友情链接 -->
          <!-- <div class="col-span-1 space-y-4">
            <h3 class="text-base font-semibold text-white mb-4">友情链接</h3>
            <ul class="space-y-2">
              <li v-for="link in friendLinks" :key="link.label">
                <a 
                  :href="link.to" 
                  class="text-sm text-gray-300 hover:text-white transition-colors"
                >
                  {{ link.label }}
                </a>
              </li>
            </ul>
          </div> -->

          <div class="col-span-3 lg:col-span-1 space-y-4 flex flex-col items-center lg:items-start text-center lg:text-left">
            <h3 class="text-base font-semibold text-white mb-2">关注迅达智讯</h3>
            <p class="text-sm text-gray-300 mb-4">联系官方</p>
            <!-- 二维码占位 -->
            <div class="w-32 h-32 bg-white rounded flex items-center justify-center">
              <img class="w-32 h-32" src="/wx.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 版权区域 - #222735 背景 -->
    <div class="px-4 py-6" style="background-color: #222735;">
      <div class="mx-auto max-w-7xl">
        <div class="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-400">
          <!-- 左侧：版权信息 -->
          <div class="text-center md:text-left">
            <p>XunDa TechMessaging. 迅达智讯 © 2025 ALL RIGHTS RESERVED. 保留所有权利</p>
          </div>
          
          <a href="https://beian.miit.gov.cn/" target="_blank" class="text-center md:text-right">
            <p>备案号:闽ICP备2025120777号-1</p>
          </a>
        </div>
      </div>
    </div>
  </footer>
</template>
